<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title>内容分发</title>
        <script src="vue@3.2.26.js"></script>        
    </head>
    <body>

        <h3>通过插槽分发内容</h3>

        <div id="app">
            <!-- 使用自定义组件并为自定义组件分发内容 -->
            <kaifamiao-dialog>{{ message }}</kaifamiao-dialog>
        </div>

        <script type="text/javascript">
            const app = Vue.createApp({
                data(){
                    return {
                        message: '当健康码第一次崩溃的时候还是可以理解的，今天又来个第二次，那就不能理解了'
                    }
                }
            });

            app.component( 'kaifamiao-dialog' , {
                template: `<div style="border: 1px solid blue ;">
                                <!-- 预留一个插槽以便于让父组件可以分发内容 -->
                                <slot></slot>
                           </div>`
            });

            app.mount( '#app' );
        </script>
        
    </body>
</html>
